iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 27
0

這3個方法都會使用函式中this指向指定物件,差別在call,會直接執行,bind會傳回一個方法可重覆

因為this動向太難掌握 而延伸出固定指定this的方法: call , apply , bind,避免模糊

如果這3個方法參數為空、null和undefined,則默認傳入全局物件window。

    var n =  123 ;
    var obj = {
    	n :  456 
    };
    function  a () { 
    	console.log (this.n);
    }
    a();
    a.call (obj)
    
    function.prototype.call(指定的物件);

call(要指定this的物件, arg1,arg2,arg3 , ... , ... , ...)

方法會將函數內部this指向指定物件,然後位於指定物件scope(作用區)執行使用call方法之物件,並只呼叫一次

    var obj = {};
    var  f  =  function () {
    	return  this ;
    };
    console.log (f () ===  window ); 
    console.log ( f.call (obj) === obj);

apply(要指定this的物件,[arg1,arg2,agr3 .......]) --call 與 apply 最大差別在於apply 能接受傳入一組陣列的參數,

  • 函數實例的call方法,可以指定函數內部this的指向(即函數執行時所在的作用域),然後在所指定的作用域中,調用該函數。

bind(要指定this的物件) ---bind方法用於將函數內部的 this 綁定到某個物件並且他也會綁定參數(記憶參數),然後返回一個新函數。-- 與call apply 比可重覆利用

    var counter = {
    	count :  0 ,
    	inc :  function () {
    		this . count ++ ;
    	}
    };
    var func =  counter.inc;
    func ();
    console.log ( counter.count ); // 0
    console.log ( count ); // NaN

上面代碼中,函數func是在全局環境中運行的,這時inc內部的this指向頂層對象window,所以counter.count 是不會變的,反而創建了一個全局變量count。因為window.count原來等於undefined,進行遞增運算後undefined++就等於NaN。

    var counter = {
    	count :  0 ,
    	inc :  function () {
    		this . count ++ ;
    	}
    };
    var func =  counter.inc.bind (counter);
    func ();
    console.log ( counter.count ); // 1

上面代碼中,bind方法將inc方法綁定到counter以後,再運行func就會得到正確結果。

this綁定到其他對像也是可以的。

    var counter = { 
    	count :  0 ,
    	inc :  function () { 
    		this.count ++ ;
    	}
    };
    var obj = {
    	count :  100,
    };
    var func =  counter.inc.bind ( obj );
    func ();
    console.log ( obj.count ); // 1

上一篇
Day 26 Fetch vs XHR
下一篇
Day 28 Regex
系列文
30 天 node.js 學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言